﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4/s4-bg.jpg');
            background-repeat: no-repeat;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }

    </style >
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.remote.js"></script>
</head>
<body>
    <canvas id="cavans1" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position: absolute; top: 690px; left: 86px;  width:580px; height:350px;"></div>
    <svg style="position: absolute; top: 190px; left: 540px;" width="800" height="800"></svg>
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script>

        var svg = d3.select("svg"),
            width = +svg.attr("width");

        var format = d3.format(",d");

        var color = ['red','#22ee22','blue','green','#ee55ee','#55eeee'];
        var packageArr = [];
        var pack = d3.pack()
            .size([width, width])
            .padding(1.5);

        d3.csv("http://172.30.13.36:8080/data/flare.csv", function (d) {
            d.value = +d.value;
            if (d.value) return d;
        }, function (error, classes) {
            if (error) throw error;

            var root = d3.hierarchy({ children: classes })
                .sum(function (d) { return d.value; })
                .each(function (d) {
                    if (id = d.data.id) {
                        var id, i = id.lastIndexOf(".");
                        d.id = id;
                        d.package = id.slice(0, i);
                        d.packageId = -1;
                        for (var index = 0; index < packageArr.length; index++) {
                            if (packageArr[index] == d.package) {
                                d.packageId = index;
                                break;
                            }
                        }
                        if (-1 == d.packageId) {
                            packageArr.push(d.package);
                            d.packageId = packageArr.length - 1;
                        }
                        d.class = id.slice(i + 1);
                    }
                });

            var node = svg.selectAll(".node")
              .data(pack(root).leaves())
              .enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

            var radius = 0;
            node.append("circle")
                .attr("id", function (d) { return d.id; })
                .attr("r", function (d) {
                    radius = d.r;
                    return d.r;
                })
                .style("fill", function (d) {
                    return color[d.packageId];
                });

            node.append("clipPath")
                .attr("id", function (d) { return "clip-" + d.id; })
              .append("use")
                .attr("xlink:href", function (d) { return "#" + d.id; });
            node.append("text")
                .attr("clip-path", function (d) { return "url(#clip-" + d.id + ")"; })
              .selectAll("tspan")
              .data(function (d) {
                  //return d.class.split(/(?=[A-Z][^A-Z])/g);
                  //console.log(this.parentNode.childNodes[0].r.baseVal.value);
                  return autoLN(d.class, this.parentNode.childNodes[0].r.baseVal.value);
              })
              .enter().append("tspan")
                .attr("x", 0)
                .attr("y", function (d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 15; })
                .text(function (d) {
                    //console.log(this.parentNode.parentNode.childNodes[0]);
                    //return this.parentNode.parentNode.childNodes[0].r.baseVal.value;
                    if (this.parentNode.parentNode.childNodes[0].r.baseVal.value > 30) {
                        return d;
                    }
                    return '';
                });

            node.append("title")
                .text(function (d) { return d.id + "\n" + format(d.value); });
        });

        function autoLN(str, width) {
            var strArr = [];
            var lnStr = '';
            var lnCharCount = parseInt(width / 8);
            for (var index = 1; index <= str.length; index++) {
                if (index % lnCharCount == 0) {
                    lnStr += str[index - 1];
                    strArr.push(lnStr);
                    lnStr = '';
                } else {
                    lnStr += str[index - 1];
                }
            }
            if (strArr.length == 0) {
                strArr.push(str);
            }
            return strArr;
        }
    </script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>